<!--
 *@Date: 2022-12-07 15:44:09
 * @LastEditTime: 2023-02-08 15:10:57
 *
 * @Description:
-->
<template>
    <base-container>
        <view style="padding:20rpx;background-color:#fff">
            <uni-forms label-position="top" ref="form" :modelValue="sjdxDetail" :rules="rules" label-width="200">
                <view v-for="(item, index) in sjdxUpdateFields" :key="index">
                    <uni-section v-if="sjdxFields[item].kjlx === 'MyGroup'" :title="sjdxFields[item].zdmc"
                        type="line"></uni-section>
                    <view v-else-if="sjdxFields[item].kjlx === 'MyImage'"
                        style="display:flex;align-items: center;justify-content:space-between;padding-bottom: 11px;">
                        <view style="color:#606266;font-size:14px;">{{ sjdxFields[item].zdmc }}</view>
                        <data-image v-model="sjdxDetail[item]" update />
                    </view>
                    <uni-forms-item
                        v-else-if="sjdxFields[item].kjlx === '$select' || sjdxFields[item].kjlx === '$checkbox' || sjdxFields[item].kjlx === '$switch' || sjdxFields[item].kjlx === 'ElDatePicker' || sjdxFields[item].kjlx === 'ElDatePicker' || sjdxFields[item].kjlx === '$input' || sjdxFields[item].kjlx === 'MyMarkDown' || sjdxFields[item].kjlx === 'jsoneditor' || sjdxFields[item].kjlx === 'MyImage' || sjdxFields[item].kjlx === '$textarea'"
                        :required="sjdxFields[item].kzxxObj.yzgz[mode].notBlank" :label="sjdxFields[item].zdmc" :name="item">
                        <view
                            v-if="sjdxFields[item].kzxxObj.cllxkz[mode].disabled || sjdxFields[item].kzxxObj.cllxkz[mode].readonly">
                            <view v-if="sjdxFields[item].kjlx === 'ElDatePicker'">
                                {{ dayjs(sjdxDetail[item], "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") }}
                            </view>
                            <view v-else>
                                {{ sjdxDetail[item + '_mc'] ? sjdxDetail[item + '_mc'] : sjdxDetail[item] }}
                            </view>
                        </view>
                        <view v-else>
                            <data-page-select :zdlb="sjdxFields[item].zdzdlb" v-model="sjdxDetail[item]"
                                :name="sjdxDetail[item + '_mc']"
                                v-if="sjdxFields[item].kjlx === '$select' && sjdxFields[item].zdfy === '1'"></data-page-select>
                            <data-select class="input-info" v-else-if="sjdxFields[item].kjlx === '$select'"
                                v-model="sjdxDetail[item]" :zdlb="sjdxFields[item].zdzdlb" />
                            <data-checkbox v-else-if="sjdxFields[item].kjlx === '$checkbox'" multiple
                                v-model="sjdxDetail[item]" :zdlb="sjdxFields[item].zdzdlb">
                            </data-checkbox>
                            <data-switch v-else-if="sjdxFields[item].kjlx === '$switch'"
                                v-model="sjdxDetail[item]"></data-switch>
                            <date-picker class="input-info" v-else-if="sjdxFields[item].kjlx === 'ElDatePicker'"
                                v-model="sjdxDetail[item]" />
                            <uni-easyinput
                                v-else-if="sjdxFields[item].kjlx === '$input' || sjdxFields[item].kjlx === 'MyMarkDown' || sjdxFields[item].kjlx === 'jsoneditor' || sjdxFields[item].kjlx === '$textarea'"
                                class="input-info" autoHeight
                                :type="sjdxFields[item].kjlx === 'MyMarkDown' || sjdxFields[item].kjlx === 'jsoneditor' || sjdxFields[item].kjlx === '$textarea' ? 'textarea' : 'text'"
                                v-model="sjdxDetail[item]" :placeholder="'请输入' + sjdxFields[item].zdmc" />
                        </view>

                    </uni-forms-item>
                </view>
            </uni-forms>
            <button @tap="submit" type="primary">提交</button>
        </view>
    </base-container>
</template>
<script setup lang="ts">
import { onLoad, onReady } from '@dcloudio/uni-app';
import { ref } from 'vue';
import SjdxModelImp from '../model/SjdxModelImp';
import dayjs from 'dayjs';

let mode = 'insert'
const form = ref()
const rules = {}
const sjdxModelImp = new SjdxModelImp()
const sjdxDetail = ref({})
const sjdxFields = ref({})
const sjdxdm = ref("")
const sjdxUpdateFields = ref([] as any)
onLoad(({ dm, id, title, cllx }: any) => {
    mode = cllx
    sjdxdm.value = dm
    uni.setNavigationBarTitle({
        title: title
    });
    sjdxModelImp.initSjdx(dm).then((result: any) => {
        sjdxFields.value = sjdxModelImp.getSjdxFields()
        sjdxUpdateFields.value = sjdxModelImp.getSjdxUpdateFields(mode).list;
        sjdxUpdateFields.value.map((item: string) => {
            if (sjdxFields.value[item].kzxxObj && sjdxFields.value[item].kzxxObj.yzgz && sjdxFields.value[item].kzxxObj.yzgz[mode]) {
                let yzgz = sjdxFields.value[item].kzxxObj.yzgz[mode]
                let FieldsRules = []
                if (yzgz.notBlank) {
                    FieldsRules.push({
                        required: true,
                        errorMessage: '请填写',
                    })
                }
                if (yzgz.length) {
                    if (yzgz.length.min) {
                        if (typeof yzgz.length.min === 'number') {
                            FieldsRules.push({
                                validateFunction: function (value: any, callback: any) {
                                    if (value.length + ''.length < yzgz.length.min) {
                                        callback(`长度不小于${yzgz.length.min}个字符`)
                                    }
                                    return true
                                }
                            })
                        } else {
                            FieldsRules.push({
                                minLength: yzgz.length.min,
                                errorMessage: `长度不小于${yzgz.length.min}个字符`,
                            })
                        }
                    }
                    if (yzgz.length.max) {
                        if (typeof yzgz.length.max === 'number') {
                            FieldsRules.push({
                                validateFunction: function (value: any, callback: any) {
                                    if (value.length + ''.length > yzgz.length.max) {
                                        callback(`长度不大于${yzgz.length.max}个字符`)
                                    }
                                    return true
                                }
                            })
                        }
                        else {
                            FieldsRules.push({
                                maxLength: '22',
                                errorMessage: `长度不大于${yzgz.length.max}个字符`,
                            })
                        }
                    }
                    if (yzgz.zzbds) {
                        FieldsRules.push({
                            pattern: yzgz.zzbds.value,
                            errorMessage: yzgz.zzbds.ts,
                        })
                    }
                    if (yzgz.email) {
                        FieldsRules.push({
                            format: 'email',
                            errorMessage: `邮箱格式不正确`,
                        })
                    }
                }

                rules[item] = {
                    rules: FieldsRules
                }

            }
        })
        form.value.setRules(rules)
        if (mode === 'update') {
            sjdxModelImp.getSjdxList(
                result.sys.authCode, undefined, { id: id }, "").then(res => {
                    sjdxDetail.value = res.list[0]
                })
        } else {
            sjdxDetail.value = sjdxModelImp.getSjdxUpdateFields(mode).xzmrz;
        }

    })
})

onReady(() => {
    form.value.setRules(rules)
})

const submit = () => {
    form.value.validate().then((res: any) => {
        console.log('表单数据信息：', res);
        if (mode === 'insert') {
            sjdxModelImp.insertSjdx(sjdxDetail.value, sjdxdm.value).then(() => {
                setTimeout(() => {
                    uni.$emit('sjdxIndexRefresh')
                    uni.navigateBack()
                }, 1000)
            })
        } else {
            sjdxModelImp.updateSjdx(sjdxDetail.value, sjdxdm.value).then(() => {
                setTimeout(() => {
                    uni.$emit('sjdxIndexRefresh')
                    uni.navigateBack()
                }, 1000)
            })
        }

    })
}
</script>
